<template>
	<view>
		<view class="container">
			<!-- #ifndef H5 -->
			<image :src="path" mode="widthFix" class="poster"></image>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<img :src="path" mode="widthFix" class="poster"></img>
			<!-- #endif -->
			<view class="flex-box flex-center tc">

				<!-- #ifndef H5 -->
				<view @tap="saveImage" class="btn1">保存图片</view>
				<!-- #ifdef MP -->
				<button class="btn2" open-type="share">分享好友</button>
				<!-- #endif -->
				<!-- #ifndef MP -->
				<button class="btn2" @click="sharewx()">分享好友</button>
				<!-- #endif -->
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="btn1">长按保存图片</view>
				<view class="flex-box flex-center btnbox">
					<button class="btn2" @click="copyUrl()">复制链接</button>
				</view>
				<!-- #endif -->

			</view>
		</view>
		<template v-if="app_logo">
			<l-painter isCanvasToTempFilePath custom-style="position: fixed; left: 200%"
				:pixel-ratio="2" path-type="url" @success="path = $event"
				css="width: 630rpx;height: 933rpx;border-radius: 35rpx;">
				<l-painter-image :src="share_image"
					css="object-fit: cover; object-position: 50% 50%; width: 100%; height: 933rpx;border-radius: 35rpx;display:block;" />
				<l-painter-image :src="app_logo"
					css=" object-fit: cover; object-position: 50% 50%; width: 80rpx; height: 80rpx;border-radius: 10rpx;display:block;position:absolute;top:82rpx;right:41rpx;" />
				<l-painter-image :src="share_qrcode"
					css=" object-fit: cover; object-position: 50% 50%; width: 218rpx; height: 218rpx;display:block;position:absolute;top:370rpx;left:206rpx;" />
			</l-painter>
		</template>
	</view>
</template>

<script>
	const app = getApp();

	const functions = require('../../../utils/functions.js');
	export default {
		data() {
			return {
				user_id: 0,
				share_qrcode: '',
				app_logo: '',
				path: '',
				share_image: ''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {

			functions.checkLogin()
			this.initData();
			this.share_image = app.globalData.config.share_image;

		},
		onShareAppMessage: function(res) {
			return {
				title: '佳和房产',
				path: '/pages/home/index/index?share_user_id=' + this.user_id
			};
		},
		methods: {
			copyUrl() {
				var url = app.globalData.h5_url + '/pages/home/index/index?share_user_id=' + this.user_id;
				uni.showModal({
					content: '确定复制分享链接？',
					confirmText: '确定',
					success: () => {
						uni.setClipboardData({
							data: url,
							success: function() {
								uni.hideToast({
									title: '复制成功',
									duration: 2000,
									icon: 'none'
								});
							},
							fail: function(err) {
								uni.showToast({
									title: '复制失败',
									duration: 2000,
									icon: 'none'
								});
							}
						});
					}
				});
			},
			sharewx() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 2,
					imageUrl: this.path,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			saveImage: function(e) {
				functions.saveImages(this.path);
			},
			// 获取所有可下拉刷新更新的数据
			initData: function() {
				var that = this;
				that.app_logo = app.globalData.config.app_logo;
				functions.getAjaxData('/api/xiluhouse/User/index', {}, function(res) {
					that.user_id = res.data.id;
					that.share_qrcode = res.data.share_qrcode_text;
				});
			},

		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 60rpx;
		min-height: auto;
	}

	.poster {
		margin: 0 0 50rpx;
		box-shadow: 0 4rpx 40rpx 0 rgba(3, 103, 179, 0.3);
		width: 630rpx;
		border-radius: 35rpx;
	}

	.btn1 {
		margin-right: 50rpx;
		width: 250rpx;
		height: 80rpx;
		background: #ff7b40;
		box-shadow: 0 4rpx 40rpx 0 rgba(248, 103, 56, 0.3);
		border-radius: 40rpx;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 80rpx;
	}

	.btn2 {
		width: 250rpx;
		height: 80rpx;
		background: #0091ff;
		box-shadow: 0 4rpx 40rpx 0 rgba(3, 103, 179, 0.3);
		border-radius: 40rpx;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 80rpx;
	}
</style>
